<template>
    <div class="bg-white h-24 flex justify-center items-center">
        <div class="w-1024px flex justify-between items-center">
            <div class="flex">
                <img class="h-12" src="/static/logo.png" />
                <!-- <div class="ml-3 border-l border-gray-300 text-gray-500 flex flex-col justify-center pl-3">
                </div> -->
            </div>
            <div class="flex justify-end items-center">
                <div class="nav-link" @click="$router.push({ name: 'home' })">首页</div>
                <div class="nav-link" @click="toLink('https://fubang.yataibaoxian.com.cn')">在线方案</div>
                <!-- <div class="nav-link">延保服务</div>
                <div class="nav-link">关于我们</div> -->
                <el-popover placement="bottom" trigger="hover">
                    <div class="
                            rounded
                            shadow-lg
                            bg-warm-gray-50
                            w-160px
                            p-2
                            flex flex-col
                            items-center
                            divide-y divide-gray-400
                        ">
                        <div class="flex flex-col justify-center items-center pb-2">
                            <img class="flex-none" src="/static/kfqrcode.png" />
                            <div class="text-xs">微信扫一扫联系我们</div>
                        </div>
                        <div class="flex flex-col justify-center items-center">
                            <div class="flex-1 font-bold flex items-center">4009-965-101</div>
                            <div class="text-xs">电话联系我们</div>
                        </div>
                    </div>
                    <div class="nav-link" slot="reference">在线客服</div>
                </el-popover>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    mounted() { },
    methods: {
        toLink(e) {
            window.open(e)
        }
    },
};
</script>

<style>
.nav-link {
    @apply mx-6 py-2 cursor-pointer border-b-2 border-transparent hover: border-b-2 hover:border-b-orange-500 hover:text-orange-500;
}
</style>